<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="盘点单号" prop="inventoryNo">
        <el-input
          v-model="queryParams.inventoryNo"
          placeholder="请输入盘点单号"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="仓库" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" placeholder="请输入仓库" :clearable="true">
          <el-option
            v-for="dict in materialWarehouse"
            :key="dict.id"
            :label="dict.warehouseName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" :clearable="true" multiple>
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.MATERIAL_INVENTORY_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['material:inventory:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['material:inventory:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="MaterialInventory"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #warehouseId="{ row }">
        {{ materialWarehouse.find((obj) => obj.id === row.warehouseId).warehouseName }}
      </template>
      <template #inventoryClerkId="{ row }">
        {{ userList.find((obj) => obj.id === row.inventoryClerkId).nickname }}
      </template>
      <template #status="{ row }">
        {{ getDictObj(DICT_TYPE.MATERIAL_INVENTORY_STATUS, row.status).label }}
      </template>
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['material:inventory:update']"
        />
        <context-menu-item
          label="审核"
          @click="handleMenuReview(row)"
          v-hasPermi="['material:inventory:review']"
        />
        <context-menu-item
          label="取消"
          @click="handleMenuCancel(row)"
          v-hasPermi="['material:inventory:cancel']"
        />
        <context-menu-item
          label="驳回审核"
          @click="handleMenuRevertReview(row)"
          v-hasPermi="['material:inventory:revertReview']"
        />
        <context-menu-item
          label="确认盘点"
          @click="handleMenuConfirm(row)"
          v-hasPermi="['material:inventory:confirm']"
        />
      </template>
    </Table>
  </ContentWrap>
  <MaterialInventoryEdit ref="editFormRef" @success="getPage" />
</template>
<script setup name="MaterialInventory" lang="ts">
import * as materialInventoryApi from '@/api/material/Inventory'
import MaterialInventoryEdit from './MaterialInventoryEdit.vue'
import * as MaterialWarehouseApi from '@/api/material/warehouse'
import * as UserApi from '@/api/system/user/user'
import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
const userList = ref()
const materialWarehouse = ref()
const message = useMessage() // 消息弹窗
const editFormRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  inventoryNo: undefined,
  warehouseId: undefined,
  status: undefined
})

const queryData = ref()
const columns = [
  {
    label: '盘点单号',
    prop: 'inventoryNo'
  },
  {
    label: '仓库',
    prop: 'warehouseId',
    slot: 'warehouseId'
  },
  {
    label: '盘点人',
    prop: 'inventoryClerkId',
    slot: 'inventoryClerkId'
  },
  {
    label: '状态',
    prop: 'status',
    slot: 'status'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(async () => {
  materialWarehouse.value = await MaterialWarehouseApi.simpleList()
  userList.value = await UserApi.listAllSimple()
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await materialInventoryApi.pageQuery(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 审核 */
const handleMenuReview = async (row) => {
  await materialInventoryApi.updateStatus({ id: row.id, action: 'review' })
  getPage()
  message.success('审核成功')
}

/** 处理右击事件 取消 */
const handleMenuCancel = async (row) => {
  await materialInventoryApi.updateStatus({ id: row.id, action: 'cancel' })
  getPage()
  message.success('取消成功')
}

/** 处理右击事件 驳回审核 */
const handleMenuRevertReview = async (row) => {
  await materialInventoryApi.updateStatus({ id: row.id, action: 'revertReview' })
  getPage()
  message.success('驳回审核成功')
}

/** 处理右击事件 确认盘点 */
const handleMenuConfirm = async (row) => {
  await materialInventoryApi.updateStatus({ id: row.id, action: 'confirm' })
  getPage()
  message.success('确认盘点成功')
}
</script>
